---
id: radio-group
title: fast-radio-group
sidebar_label: radio-group
custom_edit_url: https://github.com/microsoft/fast/edit/main/sites/website/versioned_docs/version-legacy/components/fast-radio-group.mdx
description: fast-radio-group is a web component implementation of a radio-group.
keywords:
    - fast-radio-group
---

As defined by the [W3C](https://w3c.github.io/aria-practices/#radiobutton):

> A radio group is a set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time. Some implementations may initialize the set with all buttons in the unchecked state in order to force the user to check one of the buttons before moving past a certain point in the workflow.

While any DOM content is permissible as a child of the radiogroup, only `fast-radio`'s and slotted content with a role of `radio` will receive keyboard support.

## Setup

```ts
import {
    provideFASTDesignSystem,
    fastRadio,
    fastRadioGroup
} from "@microsoft/fast-components";

provideFASTDesignSystem()
    .register(
        fastRadio(),
        fastRadioGroup()
    );
```

## Usage

```html live
<fast-radio-group value="mango" name="favorite-fruit">
    <fast-radio value="apple">Apple</fast-radio>
    <fast-radio value="mango">Mango</fast-radio>
    <fast-radio value="orange">Orange</fast-radio>
</fast-radio-group>
```

## Create your own design

```ts
import { RadioGroup, radioGroupTemplate as template } from "@microsoft/fast-foundation";
import { radioGroupStyles as styles } from "./my-radio-group.styles";

export const myRadioGroup = RadioGroup.compose({
    baseName: "radio-group",
    template,
    styles,
});
```

## API



### class: `RadioGroup`

#### Superclass

| Name                | Module                                        | Package |
| ------------------- | --------------------------------------------- | ------- |
| `FoundationElement` | /src/foundation-element/foundation-element.js |         |

#### Fields

| Name            | Privacy | Type                                        | Default | Description                                                                                                                                                                                      | Inherited From    |
| --------------- | ------- | ------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------- |
| `readOnly`      | public  | `boolean`                                   |         | When true, the child radios will be immutable by user interaction. See [readonly HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) for more information. |                   |
| `disabled`      | public  | `boolean`                                   |         | Disables the radio group and child radios.                                                                                                                                                       |                   |
| `name`          | public  | `string`                                    |         | The name of the radio group. Setting this value will set the name value for all child radio elements.                                                                                            |                   |
| `value`         | public  | `string`                                    |         | The value of the checked radio                                                                                                                                                                   |                   |
| `orientation`   | public  | `Orientation or "horizontal" or "vertical"` |         | The orientation of the group                                                                                                                                                                     |                   |
| `childItems`    | public  | `HTMLElement[]`                             |         |                                                                                                                                                                                                  |                   |
| `$presentation` | public  | `ComponentPresentation or null`             |         | A property which resolves the ComponentPresentation instance for the current component.                                                                                                          | FoundationElement |
| `template`      | public  | `ElementViewTemplate or void or null`       |         | Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.                       | FoundationElement |
| `styles`        | public  | `ElementStyles or void or null`             |         | Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition.              | FoundationElement |

#### Methods

| Name              | Privacy   | Description | Parameters | Return | Inherited From    |
| ----------------- | --------- | ----------- | ---------- | ------ | ----------------- |
| `nameChanged`     | protected |             |            | `void` |                   |
| `valueChanged`    | protected |             |            | `void` |                   |
| `templateChanged` | protected |             |            | `void` | FoundationElement |
| `stylesChanged`   | protected |             |            | `void` | FoundationElement |

#### Events

| Name     | Type | Description                                          | Inherited From |
| -------- | ---- | ---------------------------------------------------- | -------------- |
| `change` |      | Fires a custom 'change' event when the value changes |                |

#### Attributes

| Name          | Field       | Inherited From |
| ------------- | ----------- | -------------- |
| `readonly`    | readOnly    |                |
| `disabled`    | disabled    |                |
| `name`        | name        |                |
| `value`       | value       |                |
| `orientation` | orientation |                |

#### CSS Parts

| Name                 | Description                                      |
| -------------------- | ------------------------------------------------ |
| `positioning-region` | The positioning region for laying out the radios |

#### Slots

| Name    | Description                        |
| ------- | ---------------------------------- |
| `label` | The slot for the label             |
|         | The default slot for radio buttons |

<hr/>


## Additional resources

* [Component explorer examples](https://explore.fast.design/components/fast-radio-group)
* [Component technical specification](https://github.com/microsoft/fast/tree/archives/fast-foundation-3/packages/web-components/fast-foundation/src/radio-group/radio-group.spec.md)
* [W3C Component Aria Practices](https://www.w3.org/TR/wai-aria/#radiogroup)
* [Open UI Analysis](https://open-ui.org/components/radio-button.research)
